<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card
      class="SearchCard"
      body-style="padding:0px"
    >
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>

            <el-col :span="14">
              <div class="SearchLable">
                <el-input
                  placeholder="请输入内容"
                  v-model="queryInfo.srm"
                  clearable
                  @clear="clearEvent"
                ></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button
              size="medium"
              type="primary"
              @click="getSearchList()"
            >搜索</el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button
              size="medium"
              type="primary"
            >添加新药</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card
      class="TableCard"
      :body-style="{ padding: '0px' }"
    >
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{ 'text-align':'center',background: '#3F9DFD', color: '#FFF' }"
          :cell-style="{'text-align':'center'}"
          size="medium"
          stripe
          style="width: 100%;font-size:12px"
        >
          <el-table-column
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="操作"
            width="112"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="scope.row.indicaDrugId>0"
                @click="showRuleAll(scope.row.drugCode,scope.row.indicaDrugId)"
              >查看</el-button>
              <el-button
                type="text"
                v-else
                @click="showAddRule(scope.row.drugCode)"
              >新增</el-button>
            </template>
          </el-table-column>

          <el-table-column
            prop="drugCode"
            label="药品编码"
          ></el-table-column>
          <el-table-column
            prop="drugName"
            label="药品名称"
          ></el-table-column>
          <el-table-column label="药品类型">
            <template slot-scope="scope">
              <div v-if="scope.row.nameType==8">西药</div>
              <div v-else-if="scope.row.nameType==2">草药</div>
              <div v-else-if="scope.row.nameType==6">中成药</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="compName"
            label="厂家"
          ></el-table-column>

          <el-table-column
            prop="drugSpec"
            label="规格"
          ></el-table-column>
          <el-table-column
            prop="approvalCode"
            label="批准文号"
          ></el-table-column>
          <el-table-column
            prop="doseUnit"
            label="单位"
          ></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
          background
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增规则 -->
    <el-dialog
      title="新增规则"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div class="addRuleAdverse">
        <el-form
          :inline="true"
          :model="addRuleData"
          class="demo-form-inline"
          label-width="150px"
        >

          <el-form-item label="疾病ID">
            <el-input
              v-model="addRuleData.icdCode"
              size="medium"
            >
              <el-button
                slot="append"
                @click="showDisease(1)"
              >选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="给药描述">
            <el-input
              v-model="addRuleData.abstractDesc"
              size="medium"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="addRule()"
        >新 增</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 选择疾病ID -->
    <el-dialog
      title="选择疾病ID"
      :visible.sync="DiseaseVisible"
      class="editDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width:100%;height:527px">
        <div class="addInput">
          <el-input
            v-model="DiseaseData.srm"
            size="small"
            placeholder="请输入内容"
          ></el-input>
          <el-button
            style="margin-right:8px"
            type="primary"
            size="small"
            @click="SearchDrug()"
          >搜索</el-button>
        </div>
        <el-table
          :data="DiseaseData.tableData"
          stripe
          border
          height="400"
          style="width: 100%;font-size: 10px"
          :header-cell-style="{'text-align':'center'}"
          :row-style="{height:'40px'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
        >
          <el-table-column
            label
            width="35"
          >
            <template slot-scope="scope">
              <el-radio
                :label="scope.row"
                v-model="DiseaseData.radioId"
              >&nbsp;</el-radio>
            </template>
          </el-table-column>

          <el-table-column
            prop="zddm"
            width="150"
            label="诊断代码"
          ></el-table-column>
          <el-table-column
            prop="zdmc"
            label="诊断名称"
          ></el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
        <div class="dialogBlock">
          <el-pagination
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            current-page.sync="1"
            :page-size="100"
            layout="total, prev, pager, next"
            :total="DiseaseData.total"
          ></el-pagination>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <div class="SortFoot">
            <el-button
              style="margin-right:8px"
              type="primary"
              size="small"
              @click="SelectDisease(1)"
            >确定</el-button>
            <el-button
              style="margin-right:8px"
              @click="RouteVisible = false"
              size="small"
            >取消</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRuleListIndica,
  addRuleInfoIndica,
  showRuleDiseaseAge
} from "@/api/rad";
export default {
  data() {
    return {
      queryInfo: {
        srm: "",
        page: 1,
        pageSize: 20
      },
      total: 0,
      tableData: [],
      dialogVisible: false,
      RuleAllData: {
        drugCode: "",
        indicaDrugId: "",
        page: 1,
        pageSize: 20,
        total: 0,
        RuleAllTableList: []
      },
      RuleAllVisible: false,
      addRuleData: {
        drugCode: "",
        icdCode: "",
        abstractDesc: ""
      },
      DiseaseVisible: false,
      DiseaseData: {
        srm: "",
        page: "",
        pageSize: "",
        load: 0,
        total: 0,
        tableData: [],
        radioId: []
      }
    };
  },
  created: function() {
    this.getRuleListIndica();
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getRuleListIndica();
    },

    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getRuleListIndica();
    },
    handleSizeChange3(newSize) {
      this.RuleAllData.pageSize = newSize;
      this.getDiseaseJson();
    },
    handleCurrentChange3(newPage) {
      this.RuleAllData.page = newPage;
      this.getDiseaseJson();
    },
    async getRuleListIndica() {
      let res = await this.$rad.getRuleListIndica({
        srm: this.queryInfo.srm,
        page: this.queryInfo.page,
        pageSize: this.queryInfo.pageSize
      });
      (this.tableData = res.rows), (this.total = res.total);
      console.log(res.rows);
    },
    showAddRule(drugCode) {
      this.addRuleData.drugCode = drugCode;
      this.dialogVisible = true;
    },
    showRuleAll(drugCode, indicaDrugId) {
      this.RuleAllData.drugCode = drugCode;
      this.RuleAllData.indicaDrugId = indicaDrugId;
      this.RuleAllVisible = true;
      // this.showRuleAllLiver();
    },
    showDisease(load) {
      this.DiseaseVisible = true;
      this.DiseaseData.load = load;
      this.getDiseaseJson();
    },
    async getDiseaseJson() {
      let res = await this.$rad.showRuleDiseaseAge({
        srm: this.DiseaseData.srm,
        page: this.DiseaseData.page,
        pageSize: this.DiseaseData.pageSize
      });
      console.log(res);
      this.DiseaseData.tableData = res.rows;
      this.DiseaseData.total = res.total;
    },
    SelectDisease() {
      if (this.DiseaseData.radioId.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择疾病ID"
        });
      } else {
        if (this.DiseaseData.load == 1) {
          this.addRuleData.icdCode = this.DiseaseData.radioId.zddm;
        }
        this.DiseaseVisible = false;
      }
    },
    async addRule() {
      console.log(this.addRuleData);
      let res = await this.$rad.addRuleInfoContr({
        drugCode: this.addRuleData.drugCode,
        icdCode: this.addRuleData.icdCode,
        abstractDesc: this.addRuleData.abstractDesc
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogVisible = false;
        this.getRuleListIndica();
        // this.clearAddRuleData();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    getSearchList() {
      this.getRuleListIndica();
    },
    clearEvent() {}
  }
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.editDialog >>> .el-dialog__header {
  margin-bottom: 0px;
}
.editDialog >>> .el-dialog__body {
  padding-left: 0px;
  padding-right: 0px;
}
.addInput {
  height: 45px;
  display: flex;
  align-items: center;
}
.SortFoot {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.addInput >>> .el-input {
  width: 40%;
  margin-left: 8px;
}
.addInput >>> .el-button {
  margin-left: 8px;
}
.dialogBlock {
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>